<template>
  <div class="admin-home">
    <h1>管理员仪表板</h1>
    
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="statistic-cards">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="statistic-item">
            <div class="statistic-icon">
              <i class="el-icon-user"></i>
            </div>
            <div class="statistic-info">
              <div class="statistic-title">用户总数</div>
              <div class="statistic-value">{{ statistics.userCount || 0 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="statistic-item">
            <div class="statistic-icon">
              <i class="el-icon-s-order"></i>
            </div>
            <div class="statistic-info">
              <div class="statistic-title">订单总数</div>
              <div class="statistic-value">{{ statistics.orderCount || 0 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="statistic-item">
            <div class="statistic-icon">
              <i class="el-icon-time"></i>
            </div>
            <div class="statistic-info">
              <div class="statistic-title">待处理订单</div>
              <div class="statistic-value">{{ statistics.pendingOrderCount || 0 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="statistic-item">
            <div class="statistic-icon">
              <i class="el-icon-money"></i>
            </div>
            <div class="statistic-info">
              <div class="statistic-title">今日收入</div>
              <div class="statistic-value">¥{{ statistics.todayIncome || '0.00' }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 管理功能卡片 -->
    <h2>系统管理</h2>
    <el-row :gutter="20" class="management-cards">
      <el-col :span="8">
        <el-card shadow="hover" @click.native="$router.push('/admin/users')">
          <div class="management-card">
            <div class="management-icon">
              <i class="el-icon-user"></i>
            </div>
            <div class="management-title">用户管理</div>
            <div class="management-desc">查看、管理系统用户</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" @click.native="$router.push('/admin/orders')">
          <div class="management-card">
            <div class="management-icon">
              <i class="el-icon-s-order"></i>
            </div>
            <div class="management-title">订单管理</div>
            <div class="management-desc">处理用户订单、跟踪订单状态</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" @click.native="$router.push('/admin/announcements')">
          <div class="management-card">
            <div class="management-icon">
              <i class="el-icon-bell"></i>
            </div>
            <div class="management-title">公告管理</div>
            <div class="management-desc">发布和管理系统公告</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="management-cards">
      <el-col :span="8">
        <el-card shadow="hover" @click.native="$router.push('/admin/news')">
          <div class="management-card">
            <div class="management-icon">
              <i class="el-icon-news"></i>
            </div>
            <div class="management-title">新闻管理</div>
            <div class="management-desc">发布和管理系统新闻</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" @click.native="$router.push('/admin/services')">
          <div class="management-card">
            <div class="management-icon">
              <i class="el-icon-s-help"></i>
            </div>
            <div class="management-title">服务类型管理</div>
            <div class="management-desc">管理系统提供的服务类型</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" @click.native="$router.push('/admin/clothes')">
          <div class="management-card">
            <div class="management-icon">
              <i class="el-icon-shopping-bag-1"></i>
            </div>
            <div class="management-title">衣物类型管理</div>
            <div class="management-desc">管理系统支持的衣物类型</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 最近订单表格 -->
    <h2>最近订单</h2>
    <el-table
      :data="recentOrders"
      style="width: 100%"
      v-loading="loading">
      <el-table-column
        prop="orderNo"
        label="订单编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        width="120">
      </el-table-column>
      <el-table-column
        label="服务类型"
        width="120">
        <template slot-scope="scope">
          {{ scope.row.serviceTypeName || '未知服务' }}
        </template>
      </el-table-column>
      <el-table-column
        label="金额"
        width="100">
        <template slot-scope="scope">
          ¥{{ scope.row.totalAmount }}
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        width="120">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        width="160">
        <template slot-scope="scope">
          {{ formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="viewOrderDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'
import { formatDate } from '@/utils/date'

export default {
  name: 'AdminHome',
  data() {
    return {
      statistics: {
        userCount: 0,
        orderCount: 0,
        pendingOrderCount: 0,
        todayIncome: 0
      },
      recentOrders: [],
      loading: false
    }
  },
  created() {
    this.fetchStatistics()
    this.fetchRecentOrders()
  },
  methods: {
    formatDate,
    async fetchStatistics() {
      try {
        const res = await axios.get('/api/admin/statistics').then(res => res.data)
        if (res.code === 200) {
          this.statistics = res.data
        }
      } catch (error) {
        console.error('获取统计数据失败', error)
        this.$message.error('获取统计数据失败')
      }
    },
    async fetchRecentOrders() {
      this.loading = true
      try {
        const res = await axios.get('/api/admin/order/list?limit=5').then(res => res.data)
        if (res.code === 200) {
          this.recentOrders = res.data.slice(0, 5) // 只显示最近5条订单
        }
      } catch (error) {
        console.error('获取最近订单失败', error)
        this.$message.error('获取最近订单失败')
      } finally {
        this.loading = false
      }
    },
    getStatusText(status) {
      const statusMap = {
        0: '待支付',
        1: '已支付待取件',
        2: '已取件处理中',
        3: '已完成',
        4: '已取消'
      }
      return statusMap[status] || '未知状态'
    },
    getStatusType(status) {
      const typeMap = {
        0: 'warning',
        1: 'primary',
        2: 'primary',
        3: 'success',
        4: 'info'
      }
      return typeMap[status] || ''
    },
    viewOrderDetail(row) {
      // 可以跳转到订单详情页或者打开订单详情对话框
      this.$router.push(`/admin/orders?orderNo=${row.orderNo}`)
    }
  }
}
</script>

<style scoped>
.admin-home {
  padding: 20px;
}
h1, h2 {
  margin-bottom: 20px;
  color: #303133;
}
h2 {
  margin-top: 30px;
}
.statistic-cards {
  margin-bottom: 30px;
}
.statistic-item {
  display: flex;
  align-items: center;
}
.statistic-icon {
  font-size: 48px;
  color: #409EFF;
  margin-right: 20px;
}
.statistic-title {
  font-size: 14px;
  color: #909399;
}
.statistic-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}
.management-cards {
  margin-bottom: 20px;
}
.management-card {
  text-align: center;
  cursor: pointer;
  padding: 20px 0;
  transition: all 0.3s;
}
.management-card:hover {
  transform: translateY(-5px);
}
.management-icon {
  font-size: 48px;
  color: #409EFF;
  margin-bottom: 10px;
}
.management-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #303133;
}
.management-desc {
  font-size: 14px;
  color: #909399;
}
</style>